【JavaScript】クラスメソッド - クラスレベルのメソッド

【JavaScript】クラスメソッド - クラスレベルのメソッド

JavaScriptのクラスメソッドについて解説します。

検証環境

クラスメソッド

クラスメソッドは“クラスレベルのメソッド”です。

クラスの特有メソッドのため、オブジェクトメソッドとは異なり、オブジェクトを生成しなくんてもアクセス可能です。

オブジェクトの共通処理などに使用し、クラスメソッドはオブジェクトには含まれません。

定義

クラスメソッドの使用には定義が必要です。

基本構文

class クラス名 {
    static メソッド名( 仮引数1, 仮引数2 ... ) {
        // 処理...
    }
}

クラスメソッドの構文は基本的にはオブジェクトメソッドと同じですが、先頭にstaticキーワードを記述します。

サンプル

class Person {
    ___ih_hl_start
    static greeting() {
        console.log("Hello.");
    }
    ___ih_hl_end
}
 

クラスメソッドは定義のみでは実行されないため、処理に影響はありません。

呼び出し

クラスメソッドの呼び出しはクラス経由で行います。

基本構文

クラス名.クラスメソッド名( 実引数1, 実引数2 ... )

クラスメソッドを呼び出すにはクラス名とクラスメソッド名をドット(.)で繋ぎ、丸括弧(())を記述します。

引数がある場合は丸括弧内に実引数を記述してください。

サンプル

class Person {
    static greeting() {
        console.log("Hello.");
    }
}

___ih_hl_start
Person.greeting();
___ih_hl_end
Hello.

7行目のPerson.greeting()がクラスメソッドの呼び出しです。

実行結果から正常にメソッドの処理が実行されたことが分かります。

オブジェクトの共通処理

クラスメソッドはオブジェクトメソッドから呼び出すことが可能です。

class Person {
    
    first_name;
    last_name;
    
    constructor( first_name, last_name ) {
        this.first_name = first_name;
        this.last_name = last_name;
    }
    
    static greeting() {
        console.log("Hello");
    }
    
    info() {
        ___ih_hl_start
        Person.greeting();
        ___ih_hl_end
        console.log("My name is " + this.first_name + " " + this.last_name);
    }
}

let p1 = new Person("TANAKA", "TARO");
p1.info();

let p2 = new Person("SUZUKI", "JIRO");
p2.info();
Hello
My name is TANAKA TARO
Hello
My name is SUZUKI JIRO

16行目のPerson.greeting()がオブジェクトメソッドからのクラスメソッドの呼び出しです。

2つのオブジェクト(p1p2)のinfoメソッドからクラスメソッドを呼び出しており、実行結果から正常に呼び出せていることが分かります。

注意点

クラスメソッドからオブジェクトプロパティへのアクセスはできません。

class Person {
    
    first_name;
    last_name;
    
    constructor( first_name, last_name ) {
        this.first_name = first_name;
        this.last_name = last_name;
    }
    
    static greeting() {
        console.log("Hello");
        ___ih_hl_start
        console.log("My name is " + this.first_name + " " + this.last_name);
        ___ih_hl_end
    }
    
    info() {
        Person.greeting();
    }
}

let p = new Person("TANAKA", "TARO");

p.info();
Hello
My name is undefined undefined

13行目でクラスメソッドでthisキーワードを使用していますが、値はundefinedになっています。

これはクラスメソッドのthisはオブジェクトではなくクラスそのものを示すためです。

クラスメソッドでthisを出力するとPersonクラスであることが確認できます。

class Person {
    
    first_name;
    last_name;
    
    constructor( first_name, last_name ) {
        this.first_name = first_name;
        this.last_name = last_name;
    }
    
    static greeting() {
        console.log("Hello");
        ___ih_diff_start
-        console.log("My name is " + this.first_name + " " + this.last_name);
+        console.log(this);
        ___ih_diff_end
    }
    
    info() {
        Person.greeting();
    }
}

let p = new Person("TANAKA", "TARO");

p.info();
Hello
class Person {
    
    first_name;
    last_name;
    
    constructor( first_name, last_name ) {
        this.first_name = first_name;
        this.last_name = last_name;
    }
    
    static greeting()…